<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 选择器</title>
    <style>
        /*第一种：*类似通配符 作用所有标签**/
        *{ color: darkgreen}
        /*第二种：div 作用所有标签*/
        div{ font-size: 80px}
       /* 第三种：id 选择器（# ）*/
        #litop{background: blue}
        /*第四种：class 选择器（.）*/
        .huahua{color: black}

        /*第二类：组合选择器*/
        div.cuihua{font-size: 40px ;color: darkmagenta}
        #python{background-color: blue;font-size: 40px;width:400px;
            height:auto}
        #li,div.h{font-size: 30px;color:crimson}
        .div1 div{color: #cc0000}
        .div1 .div2{color: darkgoldenrod}
        .div1 .P{color: deeppink}
        .div1>.div4{color:darkcyan;}
        .div1+p{color: #cc0000}
        dev[class *="ju"]{}
        /*属性选择器*/
        div[alex]{color: deeppink}
        [alex="dasb"]{font-family: "Times New Roman";font-size: 90px}
        /*[alex~='sb']{font-family: 华文隶书}*/
        .a{font-family: 楷体;font-size: 80px}
        dev[class *="ju"]{color: darkred}




    </style>

</head>
<body>
<div class="mingju">天行健君子以自强不息，地势坤君子以厚德载物</div>
<p id="litop">id 选择器-测试样式</p><br>
<p id="litop1">id 选择器-测试333</p>

<p class="huahua">class选择器-测试444</p>
<p class="huahua">class选择器-测试555</p>
<p>测试666</p>
<a >this is a demod</a>
<p>test11</p>
<div>哈哈哈哈哈哈</div>
<div  class="cuihua">hello world div</div>
<p id="python">人生苦短、我用python</p>

<p id="li">id 选择器-测试样式11</p><br>
<div  class="h">hello world </div>
<div>before</div>
<div  class="div1">hello world1
    <div >
        <a href="">aaaaa</a>
        <p class="P">pppppPPPPP</p>
        <div>div3</div>
    </div>
    <p>p else</p>
    <div class="div2"> div2</div>
    <div class="div4">div4 子代大于号</div>

</div>
<p>after div</p>

<div alex="sb">alex</div>
<div alex="dasb">hello1</div>
<div alex="da  sb">大漠孤烟直、长河落日圆</div>
<div class="a  b">晴川历历汉阳树、芳草萋萋鹦鹉洲</div>
<div class="">天行健君子以自强不息，地势坤君子以厚德载物</div>
<div>hello1</div>





</body>
</html>